<template>
  <div class="active-t">
    <img src="https://cxj.szzkba.cn/up/uploadPath/2023/11/10/active20231110110000.png" mode="widthFix" alt="">
    <div class="active-title">狂欢领好券，享优惠</div>
    <div class="active-box">
      <div class="item" v-for="item in list" :key="item.couponId">
        <div class="flex-a">
          <div class="left flex">
            <span>{{ item.discount }}</span><span>元</span>
          </div>
          <div class="right">满{{ item.min }}使用<img v-if="item.status == 1"
              src="https://cxj.szzkba.cn/up/uploadPath/icon/pP4q1Sg.png" alt=""></div>
        </div>
        <div class="bottom"><span @click="choose(item)">{{ item.status == 1 ? '去使用' : '立即领取' }}</span></div>
      </div>
    </div>
    <div class="active-title new">新用户首次专享券</div>
    <div class="active-list">
      <div class="active-item flex-a" v-for="item in newList" :key="item.couponId">
        <div class="left flex-a">
          <div class="num flex"><span>￥</span><span>{{ item.discount }}</span></div>
          <div class="t">
            <div>{{ item.couponName }}</div>
            <div>{{ item.couponDesc }}</div>
            <span class="top-b"></span>
            <span class="bottom-b"></span>
          </div>
        </div>
        <div class="right"><span v-if="item.status == 0" @click="choose(item)">{{ item.status == 1 ? '去使用' : '立即领取'
        }}</span><img v-else src="https://cxj.szzkba.cn/up/uploadPath/icon/pP4q1Sg.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Taro, { } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getActiveCoupon, getCouponIndex, getCoupon } from '../../../api/index'

export default {
  name: 'active',
  components: {

  },
  setup() {
    const data = reactive({
      list: [],
      newList: []
    });

    onMounted(() => {
      getActive()
      getCouponList()
    });
    const getActive = () => {
      getActiveCoupon().then(res => {
        if (res.resultCode == 200) {
          data.list = res.data
        }
      })
    }
    const getCouponList = () => {
      getCouponIndex().then(res => {
        if (res.resultCode == 200) {
          data.newList = res.data
        }
      })
    }
    const choose = (item) => {
      if (item.status == 0) {
        getCoupon({ couponId: item.couponId, pUserId: null }).then(res => {
          if (res.resultCode == 200) {
            Taro.showToast({
              title: '领取成功',
              icon: 'success',
              duration: 2000
            })
            getActive()
            getCouponList()
          }
        })
      } else {
        Taro.reLaunch({
          url: '/pages/index/index'
        })
      }
    }
    return {
      ...toRefs(data), choose, getActive, getCouponList
    }
  }
}
</script>
<style lang="scss">
.active-t {
  width: 100%;
  position: relative;

  img {
    width: 100%;
    float: left;
  }

  .active-title {
    text-align: center;
    font-size: 36rpx;
    color: #F4E37D;
    position: absolute;
    top: 950rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .new {
    top: 1600rpx;
  }

  .active-box {
    background: rgba($color: #000000, $alpha: 0.3);
    width: 92%;
    border-radius: 20rpx;
    position: absolute;
    top: 1020rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 30rpx 30rpx 0 30rpx;
    box-sizing: border-box;
    min-height: 550rpx;

    .item {
      display: inline-block;
      width: 48.5%;
      border-radius: 10rpx;
      background: #fff;
      margin-bottom: 20rpx;
      vertical-align: middle;

      .flex-a {
        background: linear-gradient(to right, #FF8054, #FF6445, #FF372B);
        color: #F4E37D;
        border-radius: 10rpx 10rpx 0 0;
        padding: 15rpx 0;
        box-sizing: border-box;
      }

      .left {
        width: 70%;
        white-space: nowrap;
        align-items: baseline;
        border-right: 1rpx dashed #F4E37D;
        padding-right: 10rpx;
        box-sizing: border-box;

        span:first-child {
          font-size: 80rpx;
        }
      }

      .right {
        padding: 0 10rpx;
        text-align: center;
        position: relative;

        img {
          width: 80rpx;
          height: 80rpx;
          position: absolute;
          right: 0;
          top: -30rpx;
          transform: rotate(-10deg);
        }
      }

      .bottom {
        height: 100rpx;
        position: relative;

        span {
          display: inline-block;
          border-radius: 50rpx;
          background: linear-gradient(to bottom, #FF8054, #FF5D40, #FF2521);
          color: #fff;
          font-weight: bold;
          width: 84%;
          margin: 20rpx 8%;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
        }
      }
    }

    .item:nth-child(odd) {
      margin-right: 3%;
    }
  }

  .active-list {
    background: rgba($color: #000000, $alpha: 0.3);
    width: 92%;
    border-radius: 20rpx;
    position: absolute;
    top: 1680rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 40rpx 50rpx 10rpx 50rpx;
    box-sizing: border-box;
    min-height: 550rpx;

    .active-item {
      background: #fff;
      border-radius: 30rpx;
      margin-bottom: 30rpx;
      height: 180rpx;
      position: relative;

      .left {
        width: 80%;
        padding: 40rpx 0;
        box-sizing: border-box;

        .num {
          color: #F10007;
          font-weight: bold;
          font-size: 40rpx;
          margin: 0 30rpx;
          align-items: baseline;

          span:last-child {
            font-size: 80rpx;

          }
        }

        .t {
          font-size: 26rpx;
          color: #999;

          div:first-child {
            font-size: 34rpx;
            color: #333;
            margin-bottom: 5rpx;
          }

          .bottom-b {
            width: 40rpx;
            height: 20rpx;
            border-radius: 20rpx 20rpx 0 0;
            line-height: 20rpx;
            position: absolute;
            background: #A20E1A;
            right: 20%;
            bottom: 0;
            transform: translateX(20rpx);
          }

          .top-b {
            width: 40rpx;
            height: 20rpx;
            border-radius: 0 0 20rpx 20rpx;
            line-height: 20rpx;
            position: absolute;
            background: #A20E1A;
            right: 20%;
            top: 0;
            transform: translateX(20rpx);
          }
        }
      }

      .right {
        width: 20%;
        height: 100%;
        background: linear-gradient(to bottom, #F6E185, #FAC26A, #FAB456);
        color: #CD0006;
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 40rpx 20rpx;
        box-sizing: border-box;
        border-radius: 0 20rpx 20rpx 0;

        img {
          width: 80rpx;
          height: 80rpx;
          position: absolute;
          right: 20rpx;
          bottom: calc(50% - 40px);
          transform: rotate(-10deg);
        }
      }
    }
  }
}
</style>
